<template>
  <nav class="fixed top-0 left-0 right-0 z-50 bg-white dark:bg-gray-900 shadow-md">
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <!-- Logo -->
        <router-link to="/" class="flex items-center space-x-2">
          <img 
            src="/assets/modest.png"
            alt="Logo"
            class="h-10 w-10 mr-2"
            width="32"
            height="32"
          />
          <span class="text-2xl font-bold text-gray-900 dark:text-white">Modest</span>
        </router-link>

        <!-- Desktop Menu -->
        <div class="hidden md:flex items-center space-x-8">
          <router-link 
            v-for="item in animatedItems" 
            :key="item.path" 
            :to="item.path"
            class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
            :class="{ 'text-primary-600 dark:text-primary-400 font-semibold click-animation': isActiveRoute(item.path) }"
          >
            {{ item.name }}
          </router-link>
          <theme-toggle />
        </div>

        <!-- Mobile Menu Button -->
        <button 
          class="md:hidden p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 focus:outline-none relative z-50"
          @click="toggleMenu"
        >
          <span class="sr-only">Open menu</span>
          <svg 
            class="h-6 w-6" 
            fill="none" 
            viewBox="0 0 24 24" 
            stroke="currentColor"
          >
            <path 
              v-if="!isMenuOpen" 
              stroke-linecap="round" 
              stroke-linejoin="round" 
              stroke-width="2" 
              d="M4 6h16M4 12h16M4 18h16"
            />
            <path 
              v-else 
              stroke-linecap="round" 
              stroke-linejoin="round" 
              stroke-width="2" 
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </div>
    </div>

    <!-- Mobile Menu Overlay -->
    <transition
      enter-active-class="transition-all duration-300 ease-out"
      enter-from-class="opacity-0"
      enter-to-class="opacity-100"
      leave-active-class="transition-all duration-200 ease-in"
      leave-from-class="opacity-100"
      leave-to-class="opacity-0"
    >
      <div v-if="isMenuOpen" 
           class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-50"
           @click="closeMenu"></div>
    </transition>

    <!-- Mobile Menu Content -->
    <transition
      enter-active-class="transition-all duration-300 ease-out"
      enter-from-class="opacity-0 translate-x-full"
      enter-to-class="opacity-100 translate-x-0"
      leave-active-class="transition-all duration-200 ease-in"
      leave-from-class="opacity-100 translate-x-0"
      leave-to-class="opacity-0 translate-x-full"
      @after-enter="startAnimation"
      @before-leave="resetAnimation"
    >
      <div v-if="isMenuOpen" 
           class="fixed top-0 right-0 bottom-0 w-[280px] bg-white dark:bg-gray-800 shadow-xl z-[60] overflow-y-auto"
           style="height: 100dvh;">
        <div class="sticky top-0 bg-white dark:bg-gray-800 border-b dark:border-gray-700 px-6 py-4 flex justify-between items-center z-[61]">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">菜单</h2>
          <button
            @click="toggleMenu"
            class="rounded-md text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 focus:outline-none"
          >
            <span class="sr-only">Close menu</span>
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <nav class="px-6 pt-4 pb-6">
          <ul class="space-y-4">
            <li v-for="item in animatedItems" :key="item.path">
              <router-link
                :to="item.path"
                class="block px-4 py-3 rounded-lg text-base font-medium text-gray-900 dark:text-white hover:bg-primary-50 dark:hover:bg-primary-900/50 transition-all duration-300"
                :class="{
                  'bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400': isActiveRoute(item.path)
                }"
                @click="closeMenu"
              >
                <div class="flex items-center justify-between">
                  <span>{{ item.name }}</span>
                  <svg class="w-5 h-5 text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                  </svg>
                </div>
              </router-link>
            </li>
          </ul>
          <!-- 添加主题切换按钮 -->
          <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
            <div class="flex items-center justify-between">
              <span class="text-base text-gray-600 dark:text-gray-300">主题切换</span>
              <theme-toggle />
            </div>
          </div>
        </nav>
      </div>
    </transition>
  </nav>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import ThemeToggle from './ThemeToggle.vue'
import { useMenuAnimation } from '../composables/useMenuAnimation'
import { usePageData } from '../composables'

const route = useRoute()
const isMenuOpen = ref(false)
const { common } = usePageData()

const menuItems = computed(() => common.navigation)
const { animatedItems, startAnimation, resetAnimation } = useMenuAnimation(menuItems)

const isActiveRoute = (path) => {
  return route.path === path
}

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
}

const closeMenu = () => {
  isMenuOpen.value = false
}
</script>

<style scoped>
.click-animation:active {
  transform: scale(0.95);
  transition: transform 0.1s ease-in-out;
}
</style>